<template>
  <div>
    <!-- 顶部标题栏 -->
    <mt-header fixed title="ikun教学">
      <div slot="right">
        <router-link class="link" to="/login">登录</router-link> &nbsp;
        <router-link class="link" to="/register">注册</router-link>
      </div>
    </mt-header>

    <!-- 顶部导航条 -->
    <mt-navbar style="margin-top: 40px" fixed v-model="selected">
      <mt-tab-item id="1">科技</mt-tab-item>
      <mt-tab-item id="2">数码</mt-tab-item>
      <mt-tab-item id="3">军事</mt-tab-item>
      <mt-tab-item id="4">音乐</mt-tab-item>
    </mt-navbar>

    <!-- 轮播图 -->
    <mt-swipe style="height: 56vw; margin-top: 90px" :speed="200" :auto="3000">
      <mt-swipe-item><img src="/1.jpg" /></mt-swipe-item>
      <mt-swipe-item><img src="/2.jpg" /></mt-swipe-item>
      <mt-swipe-item><img src="/3.jpg" /></mt-swipe-item>
    </mt-swipe>

    <!-- 文章列表 -->
    <article-item v-for="i in 20" :key="i" />
  </div>
</template>

<script>
import ArticleItem from "./ArticleItem.vue";
export default {
  components: { ArticleItem },
  data() {
    return {
      selected: "1", //绑定顶部导航选中项
    };
  },
};
</script>

<style lang="scss" scoped>
.link {
  color: white;
}
.mint-swipe-item img {
  width: 100%;
}
</style>